<template>
	<view class="create-record-wrap">
		<!-- 头部 -->
		<view class="header">
			<uni-nav-bar 
			:status-bar="true" 
			fixed 
			title="新增巡查记录" 
			leftIcon="back"
			rightText="提交"
			@clickLeft="clickLeft"
			@clickRight="clickRight"
			>
			</uni-nav-bar>
		</view>
		<!-- 内容 -->
		<view class="content">
			<view class="create-record-wrap">
				<view class="dispose-wrap">
					<view class="dispose-content">
						<view class="dispose-content-text">
							<textarea
								class="custom-textarea-box"
								placeholder-style="color:#F76260" 
								placeholder="请输入处置信息..." 
								maxlength="300"
								@blur="bindTextAreaBlur"
								/>
						</view>
						<!-- 图片 -->
						<view class="upload-image-wrap">
							<custom-upload-image 
								:mode="mode" 
								:maxCount="maxCount" 
								:imgs="imgs"
								@chooseUpload="openActionSheet"
								>
							</custom-upload-image>
						</view>
						<!-- 选择上传方式 -->
						<view class="choose-upload">
							<min-action-sheet ref="actionSheet"></min-action-sheet>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import minActionSheet from '@/components/min-action-sheet/min-action-sheet.vue'
	import customUploadImage from '@/components/custom-upload-image/custom-upload-image.vue'
	import {upload} from '@/http/fileServer.js'
	export default {
		components: {minActionSheet, customUploadImage},
		data() {
			return {
				peripheralId: '',
				peripheralName: '',
				mode: '',
				maxCount: 9,
				uploadMax: 5,
				imgs: [],
				uploadImages: [],
				content: ''
			}
		},
		onLoad(option) {
			this.peripheralId = option.peripheralId
			this.peripheralName = option.peripheralName
		},
		methods: {
			clickLeft() {
				uni.navigateBack()
			},
			clickRight() {
				if (this.content || this.imgs.length > 0) {
					console.log('提交')
					// 图片上传
					if (this.uploadImages.length > 0) {
						this.uploadImagesFunc()
					}
					console.log('this.content', this.content)
				} else {
					uni.showToast({
						icon: 'none',
						title: '请填写处置内容!'
					})
				}
			},
			bindTextAreaBlur(e) {
				this.content = e.detail.value
			},
			openActionSheet() {
				this.$refs.actionSheet.handleShow({
					actions: [
						{
							name: '拍照上传'
						},
						{
							name: '从相册选择'
						}
					],
					success: res => {
						switch(res.id) {
							case -1: // -1 代表取消
							break
							case 0: // 拍照上传
							this.mode = 0
							console.log('拍照上传:0', res)
							
							break
							case 1: // 从相册选择
							 console.log('从相册选择:1', res)
							 this.mode = 1
							 uni.chooseImage({
							 	count: this.maxCount,
								sourceType: ['album'],
								success: (res) => {
									console.log('res__________::', JSON.stringify(res));
									for(let i = 0; i< res.tempFiles.length; i++) {
										console.log('#########res.tempFiles########', JSON.stringify(res.tempFiles))
										if(Math.ceil(res.tempFiles[i].size / 1024) < this.uploadMax * 1024) {
											this.imgs.push(res.tempFiles[i].path)
											this.uploadImages.push(res.tempFiles[i].path)
										}
									}
									
								}
							 })
							break
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.create-record-wrap {
		.content {
			.create-record-wrap {
				padding: 20rpx 36rpx;
				.dispose-wrap {
				  .dispose-content {
					  .dispose-content-text {
						  width: 100%;
						  box-sizing: border-box;
						  margin: 20rpx auto;
						  box-shadow: 0px 0px 0px 1px #EAEAEA;
						  border-radius: 5rpx;
						  padding: 10rpx;
						  .custom-textarea-box {
							  width: 100%;
							  word-break: break-all;
						  }
					  }
					  .upload-image-wrap {
						  margin: 60rpx auto;
					  }
				  }
				}
			}
		}
	}

</style>
